<template>
  <!-- 官网管理-推广弹窗 -->
  <div class="popularize">
    <div class="content-popup">
      <div class="box-ct">
        
        <div id="qrcode"></div>
        <span class="title-c" style="text-align: center;">二维码官网预览</span>
        <span class="title-c">复制官网H5链接</span>
        <el-input ref="pageurl" style="width:3.37rem;" v-model="parentData.pageurl"></el-input>
        <el-button class="ok" type="info" plain @click="copyUrlToClipBord">复制</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  props:['popularize'],
  data() {
    return {
      parentData:this.popularize,
    };
  },
  methods: {
    init(){
      this.qrcode(this.parentData.pageurl);
    },
    /**复制到剪切板 */
    copyUrlToClipBord(){
      this.$refs.pageurl.select();
      let successful = document.execCommand('copy');
      if(successful){
        this.$message({
          message: '成功复制到剪贴板',
          type: 'success'
        });
      }
      else{
        this.$message.error('该浏览器不支持点击复制到剪贴板');
      }
    },
    /**生成二维码 */
    qrcode(url) {
      let qrcode = new QRCode('qrcode', {
        width: 132,  
        height: 132,
        text: url, // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
      })
    },
  },
  mounted() {
	  this.init();
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.popularize {
  .content-popup {
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
    display: flex;
    .box-ct{
      // .el-input{
      //   width: 3.77rem !important;
      // }
      .title-c{
        width: 100%;
        display: inline-block;
        margin-bottom: 0.1rem;
      }
      #qrcode{
        display: flex;
        justify-content: center;
        margin: 0.16rem 0 0.05rem 0;
      }
    }
  }
  // 滚动条
  .scrollbarstyle::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.1rem;
  }
  .scrollbarstyle::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #BBBBBB;
  }
  .scrollbarstyle::-webkit-scrollbar-track {
    background: #F2F6FC;
  }
}
.ow_popularizePopup{
  top: 0.81rem !important;
  left: 2.1rem !important;
  background-color: rgba(0,0,0,0.3);
  .el-dialog{
    width: 5rem;
    .el-dialog__header{
      text-align: center;
    }
    .el-dialog__title{
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
      
    }
    .el-dialog__headerbtn{
      font-size: 0.25rem !important;
    }
  }
}
</style>